﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>RowDetail 行详细信息</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
<script src="../../scripts/boot.js" type="text/javascript"></script> 
    


    

    <script src="js/jquery.tmpl.js" type="text/javascript"></script>
    
</head>
<body>
    <h1>RowDetail 行详细信息</h1>
    
    <div id="datagrid1" class="mini-datagrid" style="width:700px;height:auto;" 
        url="../data/AjaxService.jsp?method=SearchEmployees" allowRowSelect="false" enableHotTrack="false"
        onshowrowdetail="onShowRowDetail" autoHideRowDetail="false"
    >
        <div property="columns">
            <div type="expandcolumn"></div>
            <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>    
            <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>                            
            <div field="gender" width="100" allowSort="true" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
            <div field="salary" width="100" allowSort="true">薪资</div>                                    
            <div field="age" width="100" allowSort="true">年龄</div>
            <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>                
        </div>
    </div>    
    
<style type="text/css">
.detailForm td
{
    line-height:22px;
    font-size:13px;
    font-family:Verdana;
}
</style>   
<script id="formTemplate" type="text/x-jquery-tmpl">
<table class="detailForm" style="width:100%;">
    <tr>
        <td style="width:80px;">员工帐号：</td>
        <td style="width:150px;">${loginname}</td>
        <td style="width:80px;">姓名：</td>
        <td style="width:150px;">${name}</td>
        <td style="width:80px;">薪资：</td>
        <td style="width:150px;">${salary}</td>
    </tr>
    <tr>
        <td>性别：</td>
        <td>${gender_name}</td>
        <td>年龄：</td>
        <td>${age}</td>
        <td>出生日期：</td>
        <td>${birtyday_name}</td>
    </tr>
</table>
    
</script>


    <script type="text/javascript">
        function removeRow() {
        
            grid.removeRow(0);
        }

        mini.parse();
        
        var grid = mini.get("datagrid1");
        grid.load();
        grid.sortBy("loginname", "desc");

        
        ///////////////////////////////////////////////////////       
        var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];
        function onGenderRenderer(e) {
            for (var i = 0, l = Genders.length; i < l; i++) {
                var g = Genders[i];
                if (g.id == e.value) return g.text;
            }
            return "";
        }

        function onShowRowDetail(e) {
            var grid = e.sender;
            var row = e.record;

            var td = grid.getRowDetailCellEl(row);

            $.ajax({
                url: "../data/AjaxService.jsp?method=GetEmployee&id=" + row.id,
                success: function (text) {
                    var o = mini.decode(text);
                    //生成详细信息html

                    if (o.gender == 1) o.gender_name = "男";
                    else if (o.gender == 2) o.gender_name = "女";
                    else o.gender_name = "";

                    o.birtyday_name = o.birthday ? mini.formatDate(o.birthday, "yyyy-MM-dd") : "";

                    td.innerHTML = "";
                    $("#formTemplate").tmpl(o).appendTo(td); ;
                }
            });

        }

    </script>

    <div class="description">
        <h3>Description</h3>
        
    </div>
</body>
</html>